<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="800px"
    :before-close="handleClose"
  >
    <el-form ref="formAdd" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="父级ID" prop="pid">
        <el-input
          v-model="form.pid"
          size="mini"
          disabled
          class="input-one"
          clearable
          placeholder="请输入父级ID"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜单标题" prop="title">
        <el-input
          v-model="form.title"
          size="mini"
          class="input-one"
          clearable
          placeholder="请输入菜单标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜单路径" prop="path">
        <el-input
          v-model="form.path"
          size="mini"
          class="input-one"
          clearable
          placeholder="请输入菜单路径"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon">
        <d2-icon-select
          v-model="form.icon"
          userInput
          size="mini"
          class="input-one"
        />
      </el-form-item>
      <el-form-item label="操作标识" prop="authority">
        <el-input
          v-model="form.authority"
          size="mini"
          class="input-one"
          clearable
          placeholder="POST /api/private/friends/list"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜单层级" prop="lever">
        <el-input-number
          v-model="form.lever"
          size="mini"
          class="input-one"
          controls-position="right"
          :min="1"
          :max="3"
        ></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-tag
          >菜单层级：1 ： 顶级菜单；2
          ：二级菜单；3：三级菜单（操作按钮）</el-tag
        >
      </el-form-item>
      <el-divider />
      <mk-get-button @save="save" @close="handleClose" />
    </el-form>
  </el-dialog>
</template>

<script>
import MkGetButton from "@/components/common/mk-get-button";
import MkBackList from "@/components/common/mk-back-list";

import { dirMenusCreate, dirMenusUpdate } from "@/api/modules/sys.menus.api";
import D2IconSelect from "@/components/d2-icon-select";

export default {
  name: "get-sub-menus-info",
  components: { D2IconSelect, MkBackList, MkGetButton },
  props: {
    updateData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dialogTitle: "",
      type: null,
      dialogVisible: false,
      commonKey: 0,
      form: {
        icon: "th-large",
      },
      isAdd: true,
      rules: {
        pid: [{ required: true, message: "请输入父级ID", trigger: "blur" }],

        path: [{ required: true, message: "请输入菜单路径", trigger: "blur" }],

        title: [{ required: true, message: "请输入菜单标题", trigger: "blur" }],

        icon: [{ required: true, message: "请输入菜单图标", trigger: "blur" }],
      },
    };
  },
  methods: {
    open(type, typeName, data) {
      this.resetForm();
      this.type = type;
      this.dialogTitle = typeName;
      this.dialogVisible = true;
      if (data) {
        this.form = data;

        this.$set(
          this.form,
          "lever",
          data.lever === 1 ? 2 : data.lever === 2 ? 3 : 2
        );
        this.$set(this.form, "pid", data.id);
      }
    },
    save() {
      this.$refs["formAdd"].validate((valid) => {
        if (valid) {
          dirMenusCreate(this.form)
            .then((res) => {
              this.$toast.success(
                this.type == "create" ? "添加成功！" : "修改成功！"
              );
              this.dialogVisible = false;
              this.$emit("success");
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    resetForm() {
      this.form = {};
    },
  },
};
</script>

<style lang="scss" scoped></style>
